<template>
	<view>
		<view class="top_view"
			style="background-image: url('https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/user_top_bg.png');">
			<view class="top_view_zhanwei"></view>
			<view class="top_view_info" v-if="userinfo">
				<view class="top_view_info_left">
					<view class="top_view_info_left_head">
						<image :src="ImgUrl+userinfo.avatar" class="top_view_info_left_head_img" mode=""></image>
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/nv.png"
							class="top_view_info_left_head_icon" mode="" v-if="userinfo.gender == 0"></image>
						<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/nan.png"
							class="top_view_info_left_head_icon" mode="" v-else></image>
					</view>
					<view class="">
						<view class="nav_view_info_left_right">
							<view class="name">{{userinfo.name}}</view>
						</view>
						<view class="top_btoom flex1">
							<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/shiming.png"
								class="shiming" mode=""></image>
							<view class="shiming_text">
								{{userinfo.is_varified == 1?'已实名认证':'未实名'}}
							</view>
						</view>
					</view>
				</view>
				<view class="top_view_info_right" @click="go_edituserinfo">
					<view class="top_view_info_right_text">
						编辑资料
					</view>
					<u-icon name="arrow-right" color="#999" size="14"></u-icon>
				</view>
			</view>
			<view class="top_view_info" v-else>
				<view class="top_view_info_left" @click="go_choose_name">
					<view class="top_view_info_left_head">
						<image src="@/static/user/headerImg.png" class="top_view_info_left_head_img" mode=""></image>
					</view>
					<view class="nav_view_info_left_right">
						<view class="name">未登录</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/card_top1.png" class="card_img"
				mode=""></image>
			<view class="card_jiao" @click="go_withdrawal">
				<view class="card_jiao_text">
					申请提现
				</view>
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/guaijiao.png"
					class="card_jiao_img" mode=""></image>
			</view>
			<view class="card_text">
				<view class="card_text_top">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/qianbao.png"
						class="card_text_top_qianbao" mode=""></image>
					<view class="card_text_top_text">
						余额 <text style="margin-left: 8rpx;">{{userinfo.mission_balance}}</text>
					</view>
				</view>
				<view class="card_text_bottom" @click="shouzhi">
					历史收支明细>>
				</view>
			</view>
		</view>
		<view class="card_list">
			<view class="card_list_item flex" @click="go_UploadElectronicBills">
				<view class="card_list_item_left flex1">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/dzpj.png"
						class="card_list_item_left_img" mode=""></image>
					<view class="card_list_item_left_text">
						电子票据上传
					</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
			<view class="card_list_item flex" @click="go_allpingjia">
				<view class="card_list_item_left flex1">
					<image :src="ImgUrl + 'images/pingjia.png'"
						class="card_list_item_left_img" mode=""></image>
					<view class="card_list_item_left_text">
						我的全部评价
					</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
			<view class="card_list_item flex" @click="go_txjl">
				<view class="card_list_item_left flex1">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/txjl.png"
						class="card_list_item_left_img" mode=""></image>
					<view class="card_list_item_left_text">
						提现记录
					</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
			<view class="card_list_item flex" @click="go_yjfk">
				<view class="card_list_item_left flex1">
					<image src="/static/images/changyong8.png" class="card_list_item_left_img" mode=""></image>
					<view class="card_list_item_left_text">
						意见反馈
					</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>

			<button
				style="padding: unset;margin: unset;line-height: unset;font-size: unset;border: unset;margin-top: 40rpx;"
				open-type="contact" :plain="true" hover-class="none">
				<view class="card_list_item flex" style="margin-top: 0;">
					<view class="card_list_item_left flex1">
						<image src="/static/images/changyong9.png" class="card_list_item_left_img" mode=""></image>
						<view class="card_list_item_left_text">
							平台客服
						</view>
					</view>
					<u-icon name="arrow-right" color="#666" size="12"></u-icon>
				</view>
			</button>
			<view @click="go_sz" class="card_list_item flex">
				<view class="card_list_item_left flex1">
					<image src="/static/images/changyong12.png" class="card_list_item_left_img" mode=""></image>
					<view class="card_list_item_left_text">
						设置
					</view>
				</view>
				<u-icon name="arrow-right" color="#666" size="12"></u-icon>
			</view>
		</view>

		
	</view>
</template>

<script>
	import {
		userinfo
	} from '@/api/login.js'
	export default {
		data() {
			return {
				userinfo: null,
				ImgUrl: this.$ImgUrl,
				userinfo: '',
			}
		},
		onLoad() {

		},
		onShow() {
			// let token = uni.getStorageSync('token')
			// if(token){
			// 	this.userinfo = uni.getStorageSync('userinfo')
			// }
			this.getuserinfo()
		},
		methods: {
			go_sz() {
				uni.navigateTo({
					url: '/pages/SetUp/SetUp'
				});
			},
			go_yjfk() {
				if (this.is_login()) {
					uni.navigateTo({
						url: '/pages/Feedback/Feedback'
					});
				}
			},
			getuserinfo() {
				let t = this
				userinfo().then(res => {
					if (res.code == 200001) {
						let data = res.data
						t.userinfo = res.data
						if (t.userinfo.gender == 0) {
							t.userinfo.sex = '女'
						} else {
							t.userinfo.sex = '男'
						}
					}
				}).catch(res => {
					t.userinfo = '';
				})
			},
			go_edituserinfo() {

				uni.navigateTo({
					url: '/pages/EditUserInfo/EditUserInfo'
				})
			},
			go_UploadElectronicBills() {
				if (this.is_login()) {
					uni.navigateTo({
						url: '/pages/UploadElectronicBills/UploadElectronicBills'
					})
				}

			},
			go_txjl() {
				if (this.is_login()) {
					uni.navigateTo({
						url: '/pages/WithdrawalRecords/WithdrawalRecords'
					})
				}
			},
			go_allpingjia() {
				if (this.is_login()) {
					uni.navigateTo({
						url: '/pages/allReviews/allReviews'
					})
				}
			},
			shouzhi() {
				uni.navigateTo({
					url: '/pages/IncomeAndExpenseDetails/IncomeAndExpenseDetails'
				})
			},
			go_withdrawal() {
				// uni.scanCode({
				// 	success: function (res) {
				// 		console.log(res,'');
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
				// 	}
				// });
				// return;
				uni.navigateTo({
					url: '/pages/Withdrawal/Withdrawal?balance=' + this.userinfo.mission_balance +
						'&yzh_sign_status=' + this.userinfo.yzh_sign_status
				})
			},
			go_choose_name() {
				uni.navigateTo({
					url: '/pages/ChooseName/ChooseName'
				})
			},
			is_login() {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/ChooseName/ChooseName'
						})
					}, 1500)
					return false
				} else {
					return true
				}
			}

		}
	}
</script>

<style>
	.top_view {
		width: 100%;
		height: 583rpx;

		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.top_view_zhanwei {
		width: 100%;
		height: 228rpx;
	}

	.top_view_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 9999;
	}

	.top_view_info_left {
		display: flex;
	}

	.top_view_info_left_head {
		width: 106rpx;
		height: 106rpx;
		position: relative;
	}

	.top_view_info_left_head_img {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
		background: #ccc;
	}

	.top_view_info_left_head_icon {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: #fff;
		border-radius: 50%;
	}

	.nav_view_info_left_right {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.nav_view_info_left_right_top {
		color: #666;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		margin-left: 20rpx;
		margin-top: 12rpx;
	}

	.name {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 34rpx;
		font-style: normal;
		font-weight: 400;
		margin-right: 8rpx;
	}

	.nav_view_info_left_right_bottom {
		width: 110rpx;
		height: 36rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%);
	}

	.nav_view_info_left_right_bottom_min {
		color: #999;
		font-family: Alibaba PuHuiTi;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		height: 20rpx;
		line-height: 20rpx;
	}

	.nav_view_info_left_right_bottom_left {
		width: 20rpx;
		height: 20rpx;
	}

	.top_view_info_right {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_view_info_right_text {
		color: #8C97A5;
		text-align: right;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		margin-top: -2rpx;
	}

	.card {
		width: 100%;
		height: 438rpx;
		position: relative;
		margin-top: -350rpx;
	}

	.card_img {
		width: 750rpx;
		height: 438rpx;
		/* margin-top: -50rpx; */
		/* width: 660rpx;
		height: 256rpx; */
	}

	.card_jiao {
		width: 218rpx;
		height: 150rpx;
		position: absolute;
		right: -38rpx;
		top: 200rpx;
	}

	.card_jiao_img {
		width: 150rpx;
		height: 106rpx;
	}

	.card_jiao_text {
		width: 150rpx;
		position: absolute;
		top: 28rpx;
		left: 0;
		color: #2864F8;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		z-index: 99;
		margin-left: 30rpx;
	}

	.card_text {
		width: 100%;
		height: 256rpx;
		position: absolute;
		top: 120rpx;
		left: 20rpx;
		right: 0;
		padding: 36rpx;
		box-sizing: border-box;
	}

	.card_text_top {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.card_text_top_qianbao {
		width: 40rpx;
		height: 40rpx;
	}

	.card_text_top_text {
		color: #FFF;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
		margin-left: 8rpx;
	}

	.card_text_bottom {
		display: inline-block;
		padding: 4rpx 16rpx 6rpx 16rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		background: rgba(199, 223, 244, 0.16);
		color: rgba(255, 255, 255, 0.60);
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-weight: 400;
		margin-top: 20rpx;
	}

	.card_list {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.card_list_item:first-child {
		margin-top: 21rpx;
	}

	.card_list_item {
		margin-top: 40rpx;
	}

	.card_list_item_left_img {
		width: 40rpx;
		height: 40rpx;
	}

	.card_list_item_left_text {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
		margin-left: 20rpx;
	}

	.shiming {
		width: 52rpx;
		height: 52rpx;
		position: relative;
		left: 35rpx;
		top: -5rpx;
	}

	.shiming_text {
		width: 138rpx;
		height: 36rpx;
		border-radius: 18rpx 18rpx 18rpx 8rpx;
		background: linear-gradient(180deg, #F9F3DB 0%, #F8D3A6 100%);
		color: #CD8409;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-weight: 700;
		text-align: center;
		line-height: 36rpx;
	}

	.top_btoom {
		margin-left: -20rpx;
	}
</style>